<%@ page import="com.jkt.rms.commons.includes.*"%>
<%@ page import="java.util.*"%>
<%@ page import="com.jkt.rms.business.*"%>

<%@ include file="/WEB-INF/jsp/include.jsp" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="/spring"%>

<html>
<head>
<title><fmt:message key="lbl.title.templatePage" /></title>
<script language="javascript"
	src="<%=PathDefinations.jsPath%>calendar.js"></script>
<script language="javascript">


function addRow(tableID) {

	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);

	var cell1 = row.insertCell(0);
	cell1.innerHTML = "<input type = 'text' name =  'project' size = '10' id = 'projectId' />";
	
	
	var cell2 = row.insertCell(1);
	cell2.innerHTML = "<input type = 'text' name =  'project' size = '10' id = 'startDate1' /><a href = \"javascript:setdate('\"\"'',document.getElementById('startDate1')\"><img style='cursor:hand' src='media/images/cal.gif' width='16' height='16' border='0' /></a>";
	
	

	var cell3 = row.insertCell(2);
	cell3.innerHTML = "<input type = 'text' name =  'project' size = '10' id = 'projectId' />";

}


function addRows(id) {
	alert("hello");
	alert(id);
	var cnt = 0;
	
	var table = document.getElementById(id);
	var rowCount = table.rows.length;
	alert(rowCount);
	//var row = table.insertRow(rowCount);
	 	var row = table.insertRow(1);
	  var oCell = table.insertCell();   
		oCell.innerHTML = "<input type = 'text' name =  'project' size = '10' id = 'projectId' />calImg";
	 
//	oCell.id = "sn";
//	oCell.setAttribute('id','sn');
//	oCell.name = "sn";
//	oCell.setAttribute('name','sn');
//	oCell.innerHTML = "&nbsp;&nbsp;&nbsp;"+(counterIndex+1)+"."; //1

	//oCell = table.insertCell(); //2
	//oCell.vAlign = "top";
	//oCell.setAttribute('valign','top');
	//oCell.innerHTML = "<input type = 'text' name =  'project' size = '10' id = 'projectId' />";

		//document.getElementById('hiddenDiv').innerHTML += "<input type = 'hidden' name =  'compStatus'  nowrap  id = 'precomp' value = "+"PreComp"+(counterIndex+1)+"."+"/>";
		
		//var functionStr =  'removeRow(this,"'+id+'")';
		//var deleteImg =	"<img  style='cursor:hand'  src='<%=request.getContextPath()%>/images/delete.jpg' alt='Delete Current row' width='21.5' height='21.5' onclick="+functionStr+">"
		//oCell.innerHTML = deleteImg;
		// counterIndex++;
	}

</script>
<%Calendar calendar = Calendar.getInstance();

			String month = String.valueOf((calendar.get(Calendar.MONTH)) + 1);
			String date = String.valueOf(calendar.get(Calendar.DATE));
			String serverdate;
			int year = calendar.get(Calendar.YEAR);
			if (month.length() < 2) {
				month = "0" + month;
			}
			if (date.length() < 2) {
				date = "0" + date;
			}%>
<script language="javascript">
	var serverdate = '<%=date + "/" + month + "/" + year%>';
</script>
</head>
 <body><center>
 	<br>
	<div id="headerbar"><fmt:message key="lbl.title.templatePage" /></div>

	<div id="content">
		<div>
		<table  width="100%" cellpadding="0" cellspacing="0" border = "0">
			<tr valign="top" align="center">
				<td width="80%">
			<div id = "ADD RESOURCE">
				<form:form method="POST" commandName="cmdResource" action="resource.htm?method=showUI" name="addResourceForm" title = "Add Resource">
				  <fieldset>
				  <legend ><strong>Add Resource </strong></legend>
					<table width = "90%" border = "0" cellpadding="0" cellspacing="0" >
						
					  	<tr>
			            	<td align='right' class=header  width = "25%" >Resource Code:</td>
				            <td align='center' class=value width = "25%"> 
				           		<form:input   path="resCode" tabindex="1" maxlength="50"  />
			            	</td>
			            	
			            	<td align='right' class=header width = "25%" >&nbsp;</td>
				            <td width = "25%">
				          &nbsp;
			            	</td>
			            	  	
			         	 </tr>
			          <tr>
			          	<td align='right' width = "25%">First Name:</td> 
			            		<td align='center' width = "25%">
			            			<form:input   path="firstName"  tabindex="2"  maxlength="50" />
			            </td>
			            
			            <td align='right' width = "25%">Last Name:</td> 
			            	<td align='center' width = "25%">
			            	<form:input   path="lastName"  tabindex="3"  maxlength="50" />
			            </td>
			           </tr>
			            <tr>
			            	<td align='right'  width = "25%">Email:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="email"  tabindex="4"  maxlength="100"/>		
			            	</td>
			            	
			            	<td align='right'  width = "25%">Phone No:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="phoneNo"  tabindex="5"  maxlength="100"/>		
			            	</td>
			           </tr>
			            <tr>
			            	<td align='right'  width = "25%">Primary Skill:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="primarySkill"  tabindex="6"  maxlength="100"/>		
			            	</td>
			            	
			            	<td align='right'  width = "25%">Secondry Skill:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="secondrySkill"  tabindex="7"  maxlength="100"/>		
			            	</td>
			           </tr>
			           
			           <tr>
			            	<td align='right'  width = "25%">Total Exp:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="totalExp"  tabindex="8"  maxlength="100"/>		
			            	</td>
			            	
			            	<td align='right'  width = "25%">Relevant Exp:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="relExp"  tabindex="9"  maxlength="100"/>		
			            	</td>
			           </tr>
			           
			            <tr>
			            	<td align='right'  width = "25%">Role:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:select
								path="roleId" tabindex="6" cssStyle="width:160Px">
								<form:option value="" label="Select" />
								<form:options items="${cmdResource.projectRoleList}" itemValue="roleCode" itemLabel="roleName"/>
							</form:select>		
			            	</td>
			            	<td align='right'  width = "25%">Vendor:</td>
			            	<td align='center'  width = "25%">
			           	 		<form:select path="vendorName" tabindex="6" cssStyle="width:160Px">
								<form:option value="" label="Select" />
								<form:options items="${cmdResource.vendorList}" itemValue="id" itemLabel="name"/>
							</form:select>		
			            	</td>
			           </tr>
			         
			          <tr>
			            	<td align='right'  width = "25%">Start Date:</td>
			            	<td align='center'  width = "25%">
			           	 	<form:input   path="startDate"  tabindex="11"   id="startDateID" cssClass="calander"/>
			           	 		<a	href="#"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" onclick="javascript:setdate('',document.getElementById('startDateID'))"/></a>		
			            	</td>
			            	<td align='right'  width = "25%">End Date :</td>
			            	<td align='center'  width = "25%">
			           	 		<form:input   path="endDate"  tabindex="12" id="endDateID" cssClass="calander"/>	
			           	 		<a	href="javascript:setdate('',document.getElementById('endDateID'))"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" /></a>	
			            	</td>
			           </tr>
			            <tr>
			            	
			            <td align='right' class=header width = "25%" >Location:</td>
				          <td align='center'  width = "25%">
				          <form:select path="locationId" tabindex="13" cssStyle="width:160Px">
								<form:option value="" label="Select" />
								<form:options items="${cmdResource.locationList}" itemValue="id" itemLabel="name"/>
							</form:select>
			            </td>
			            	
			            	<td align='right'  width = "25%">Rate:</td>
			            	<td align='center'  width = "25%" >
			           	 		<form:input   path="rate"  tabindex="14"  />		
			            	</td>
			            	
			           </tr>
			           
			           <tr>
			            <td width="90%" colspan="4">
			          		<fieldset>
			          		<legend><strong>Add Project </strong></legend>
			          		<table width = "100%" border = "1" cellpadding="0" cellspacing="0" id = "tabProjectId" >
			          		<tr align="center"><td width = "25%">Project</td><td width = "25%">Start Date</td> 
			          		<td width = "25%">End Date</td>
			          		<td width = "25%"><input type='button' name='button' value='Add' onclick="addRow('tabProjectId')"></td>
			          		
			          		</tr>
			          		<tr align="center">
			          		<td ><form:select path="vendorName" tabindex="6" cssStyle="width:160Px">
								<form:option value="" label="Select" />
								<form:options items="${cmdResource.projectList}" itemValue="projectNumber" itemLabel="projectName"/>
							</form:select></td>
							
							<td><form:input   path="startDate"  tabindex="11"   id="startDateID" cssClass="calander"/>
			           	 		<a	href="javascript:setdate('',document.getElementById('startDateID'))"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" /></a></td> 
							
							<td><form:input   path="endDate"  tabindex="12" id="endDateID" cssClass="calander"/>	
			           	 		<a	href="javascript:setdate('',document.getElementById('endDateID'))"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" /></a></td>
							
							</tr>
							<tr align="center">
			          		<td ><form:select path="vendorName" tabindex="6" cssStyle="width:160Px" id="vendorName1">
								<form:option value="" label="Select" />
								<form:options items="${cmdResource.projectList}" itemValue="projectNumber" itemLabel="projectName"/>
							</form:select></td>
							
							<td><form:input   path="startDate"  tabindex="11"   id="startDateID1" cssClass="calander"/>
			           	 		<a	href="javascript:setdate('',document.getElementById('startDateID'))"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" /></a></td> 
							
							<td><form:input   path="endDate"  tabindex="12" id="endDateID1" cssClass="calander"/>	
			           	 		<a	href="javascript:setdate('',document.getElementById('endDateID'))"
								class="calender"><img src="<%=PathDefinations.imagePath%>cal.gif" width="16" height="16"
								border="0" /></a></td>
							
							</tr>
			          		</table>
			          		
			          	</fieldset>
			            	
			            </td>
			          </tr>
			          
			          <tr>
			            <td colspan=4 align=center>
			          		&nbsp;
			            </td>
			          </tr>
			          
			          
			          <tr >
			            <td colspan="4" align="center">
			              <input class="value" type='submit' name='button' value='Save'   title="" tabindex="7">
			            </td>
			          </tr>
			     </table>
			     </fieldset>
			     </form:form>
			     </div>
      		</td>
		</tr>
	</table>
		</div>
		<p>

		</p>
		<br>			
	</div>
		
<%@ include file="footer.jsp" %>
</center></body>
</html>
